<template>
	<view class="nearby-store">
		<!-- 附近门店 -->
		<view class="content-list" v-for="item in nearyStoreList" :key="item.id">
			<view class="main-list">
				<view class="img">
					<image :src="item.enterprise_logo" mode=""></image>
				</view>
				<view class="detail" @tap="toLocation(item)">
					<text>{{item.enterprise_name}}</text>
					<view class="address">
						<image src="../../static/icon/daohang12.png" mode=""></image>
						<text>{{item.province}} {{item.city}} {{item.address}}</text>
					</view>
				</view>
				<view class="distance">
					<text @tap="toLocation(item)">据您{{item.distance}}</text>
					<view class="store-entry" @tap="jumpStore(item.id)">
						<text>进店</text>
						<image src="../../static/icon/arrow-right-pink.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="note">
				<text @tap="jumpStore(item.id)">查看详情</text>
				<text @tap="callPhone(item.operator_contact)">联系商家</text>
			</view>
		</view>
		<u-loadmore v-if="nearyStoreList.length" bg-color="transparent" margin-bottom="20" margin-top="20" :status="statusMore"
		 @loadmore="loadmore" />
	</view>
</template>

<script>
	import service from '@/store/service.js';
	// import wx from 'weixin-js-sdk';
	export default {
		data() {
			return {
				page: 1,
				total: 0,
				nearyStoreList: [], //附近的商家列表
				statusMore: 'loadmore',
				getMore: false,
				longitude: '',
				latitude: '',
			};
		},
		onReachBottom() {
			if (this.nearyStoreList.length < this.total) {
				this.getMerchList()
			} else {
				this.statusMore = 'nomore'
			}
		},
		onLoad() {
			// this.getWxConfig()
			this.getMerchList()
			this.getLocation(() => {
			       console.log('浏览器没有navigator.geolocation');
			     }, (pos) => {
			       console.log('同意获取定位信息 position = ');
			       console.log(pos);
			       console.log('经度', pos.coords.latitude);
			       console.log('纬度', pos.coords.longitude);
			     }, (error) => {
			       if (error.code) {
			         switch (error.code) {
			           case error.PERMISSION_DENIED:
			             console.log('获取lbs失败：用户拒绝授权');
			             break;
			           case error.POSITION_UNAVAILABLE:
			             console.log('获取lbs失败：无法获取当前位置');
			             break;
			           case error.TIMEOUT:
			             console.log('获取lbs失败：超时');
			             break;
			           case error.UNKNOWN_ERROR:
			             console.log('获取lbs失败：位置错误');
			             break;
			           default:
			             console.log('获取lbs失败：兜底报错');
			             break;
			         }
			       }
			     })
		},
		methods: {
			// getWxConfig() {
			// 	const that = this
			// 	this.$http.get(service.api.index.getWxConfig, {
			// 		url: location.href.split('#')[0]
			// 	}).then(res => {
			// 		console.log(res.data, 'wxConfig');
			// 		const data = res.data;
			// 		wx.config({
			// 			debug: false,
			// 			appId: data.appId,
			// 			timestamp: data.timestamp,
			// 			nonceStr: data.nonceStr,
			// 			signature: data.signature,
			// 			jsApiList: ["getLocation"]
			// 			// jsApiList: ["openLocation"]
			// 		});
			// 		wx.ready(function() {
			// 			wx.checkJsApi({
			// 				jsApiList: ['getLocation'],
			// 				// jsApiList: ["openLocation"],
			// 				success: function(res) {
			// 					console.log(res, 'success-checking');
			// 					wx.getLocation({
			// 						type: 'wgs84',
			// 						success: res => {
			// 							let addr = that.$gaoDeToBaidu(res.longitude, res.latitude)
			// 							that.longitude = addr.longitude
			// 							that.latitude = addr.latitude		
			// 							console.log(addr, 'business-location-baidu');
			// 							that.getMerchList()
			// 						}
			// 					});
			// 				}
			// 			})
			// 		})
			// 		wx.error(function(res) {
			// 			console.log(res, 'error-checking');
			// 		})
			// 	})
			// },
			getLocation(noPos, agreePos, refusePos) {
				  if (navigator.geolocation) {
				    navigator.geolocation.getCurrentPosition(agreePos, refusePos);
				  } else {
				    noPos();
				  }
				},
				 
			toLocation(item) {
				let location = this.$bd_encrypt(item.lng, item.lat)
				let latitude = Number(location.latitude)
				let longitude = Number(location.longitude)
				const destination =item.province +item.city+item.address
				uni.navigateTo({
					url:'../navigation/navigation?longitude='+longitude+'&latitude='+latitude+"&destination="+destination
				})
			},
			jumpStore(id) {
				uni.navigateTo({
					url: './store?merch_id='+ id
				})
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getMerchList() {
				this.$http.post(service.api.index.getMerchList, {
					page: this.page,
					lng: this.longitude,
					lat: this.latitude
				}).then(res => {
					if (res.code === 1) {
						if (this.getMore) {
							res.data.data.map(item => {
								if (item.distance > 1000) {
									item.distance = String((item.distance / 1000)).substr(0, 6) + 'km'
								} else {
									item.distance = String(item.distance).substr(0, 6) + 'm'
								}
							})
							this.page = ++this.page
							this.nearyStoreList = this.nearyStoreList.concat(res.data.data)
						} else {
							this.getMore = true
							this.nearyStoreList = res.data.data
							this.page = ++this.page
							this.total = res.data.total
							this.nearyStoreList.map(item => {
								if (item.distance > 1000) {
									item.distance = String((item.distance / 1000)).substr(0, 6) + 'km'
								} else {
									item.distance = String(item.distance).substr(0, 6) + 'm'
								}
							})
						}
					} else {
						this.$api.msg(res.info)
					}
				})
			},
		}
	}
</script>

<style lang="less">
	// 附近门店
	.nearby-store {
		.content-list {
			width: 100%;
			border: 1px solid rgba(0, 0, 0, .1);
			margin-bottom: 20rpx;
			background-color: #FFFFFF;

			// 上部分
			.main-list {
				height: 150rpx;
				width: 100%;
				display: flex;

				.img {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					width: 15%;

					>image {
						height: 100rpx;
						width: 100rpx;
					}
				}

				.detail {
					height: 100%;
					width: 60%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 18rpx 0;

					>text {
						font-weight: bold;
						font-size: 28rpx;
					}

					.address {
						line-height: 33rpx;

						>image {
							height: 35rpx;
							width: 35rpx;
						}

						>text {
							font-size: 24rpx;
							color: rgba(0, 0, 0, .6);
						}
					}
				}

				.distance {
					width: 25%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					padding: 10px 5rpx;

					>text {
						font-size: 22rpx;
						color: rgba(0, 0, 0, .8);
					}

					.store-entry {
						padding: 0 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 40rpx;
						border: 1px solid #D68FA8;

						>text {
							font-size: 24rpx;
							color: #D68FA8;
						}

						>image {
							height: 25rpx;
							width: 25rpx;
						}
					}
				}

			}

			// 下部分
			.note {
				height: 66rpx;
				width: 100%;
				display: flex;
				border-top: 1px solid rgba(0, 0, 0, .1);

				& text:first-child {
					font-size: 26rpx;
					flex: 1;
					text-align: center;
					line-height: 66rpx;
					border-right: 1px solid rgba(0, 0, 0, .1);
				}

				& text:last-child {
					font-size: 26rpx;
					flex: 1;
					text-align: center;
					line-height: 66rpx;
				}
			}
		}
	}
</style>
